<template>
	<view class="comeInfo">
		<!-- 材料出库  查看记录 --- 详情页面 -->
		<navBar title="查看详情" goBackUrl="/subpackage-materials/pages/materials/materialsCome/materialsCome"
			@goBack="goBack"></navBar>

		<scroll-view scroll-y="true" class="scroll-box">
			<view class="box2">
				<view class="content">
					<view class="project">
						<image class="image" src="/subpackage-equipment/static/project1.png" mode=""></image>
						<view class="name">
							<view class="t1">{{obj.orgName}}</view>
							<view class="t2">{{obj.projectCascade}}</view>
						</view>
					</view>

					<view class="box uniCollapse">
						<view class="nav border">
							<view class="name">出库编号</view>
							<view class="value">{{obj.code}}</view>
						</view>

						<view class="nav border">
							<view class="name">材料出库单</view>
							<view class="value width">{{tableData.length}}</view>
						</view>

						<uni-collapse>
							<uni-collapse-item v-for="(item,index) in tableData" title-border="show" :key="index"
								:title="item.name" :value="item.num">
								<template v-slot:title>
									<view class="collapse-title">
										<view class="left">
											{{ item.name }}
										</view>
										<view class="right">
											{{ item.num }}
										</view>
									</view>
								</template>
								<view class="center" v-for="value in item.list">
									<view class="item">
										<view class="name">规格型号：</view>
										<view class="value">{{value.specificationModel}}</view>
									</view>
									<view class="item">
										<view class="name">过保日期：</view>
										<view class="value">{{value.time}}</view>
									</view>
									<view class="item">
										<view class="name">基地名称：</view>
										<view class="value">{{value.stationName}}</view>
									</view>
									<view class="item">
										<view class="name">出库量：</view>
										<view class="value">{{value.exNum}}吨</view>
									</view>
								</view>
							</uni-collapse-item>
						</uni-collapse>
					</view>

					<!-- 暂时没有	<view class="flow">
						<view class="f-title">流程</view>
						<view class="f-body">
							<u-steps class="step" current="1" dot direction="column" activeColor="#2F80ED" inactiveColor="#2F80ED">
								<u-steps-item title="出库提交" desc="2月15日  18:25"></u-steps-item>
								<u-steps-item title="出库审核" desc="2月15日  18:25"></u-steps-item>
							</u-steps>
							<view class="user">
								<view class="user-item">
									<image class="userImg" src="/static/image/dispatch/user.png" mode=""></image>
									<text class="username">卢灵风</text>
								</view>
								<view class="user-item">
									<image class="userImg" src="/static/image/dispatch/user.png" mode=""></image>
									<text class="username">卢灵风</text>
								</view>
							</view>
						</view>
					</view> -->
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import {
		getMaterialOutCode
	} from "@/api/materials/materials.js"
	import mixins from "@/utils/mixins.js"
	import uniCollapse from "./../../../components/uni-collapse/components/uni-collapse/uni-collapse.vue";
	export default {
		name: "comeInfo",
		components: {
			uniCollapse
		},
		mixins: [mixins],
		data() {
			return {
				list: [],
				obj: {},
				tableData: []
			}
		},
		onLoad() {
			// console.log('onload')
			// this.$$off('data-check')
			// this.$$on('data-check',data=>{
			// 	console.log(data)
			// })
			// #ifdef APP-NVUE
			const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
			// #endif
			// #ifndef APP-NVUE
			const eventChannel = this.getOpenerEventChannel();
			// #endif
			eventChannel.on('acceptDataFromOpenerPage', data => {
				this.obj = data
				this.init(data)
				console.log('data', data)
			})
		},
		methods: {
			init(data) {
				getMaterialOutCode({
					code: data.code
				}).then(res => {
					// window.console.log(res);
					console.log(res)
					let list = res.result.map(item => {
						let time = ""
						if (item.expirationDate) {
							time = this.getDate(item.expirationDate)
						}
						return {
							...item,
							time: time,
							exNum: item.exNum.toFixed(2)
						}
					})
					let set = Array.from(list.map(item => item.name))
					console.log('set', set)

					set.forEach(item => {
						let j = 0
						let o = {
							name: item,
							list: [],
							num: 0,
						}
						list.forEach(i => {
							if (item === i.name) {
								o.list.push(i)
								j++
							}
						})
						//记录相同的个数
						o.num = j
						this.tableData.push(o)
					})
					console.log('list', list)
				})
			},
			goBack(url) {
				uni.navigateBack({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.comeInfo {
		width: 100%;
		height: 100%;
		font-family: PingFang SC-Bold, PingFang SC;
		/* #ifdef MP-WEIXIN */
		padding-top: 180rpx;

		/* #endif */
		.scroll-box {
			max-height: calc(100vh - 170rpx);
			padding-top: 10rpx;
		}

		.box2 {
			background-color: #f5f7fa;
			padding-top: 30rpx;
			height: calc(100vh - 170rpx);
		}

		.content {
			background: #FFFFFF;
			height: calc(100vh - 170rpx);

			.project {
				background-color: #FFFFFF;
				padding: 0rpx 30rpx;
				// height: 150rpx;
				display: flex;
				align-items: center;
				padding-top: 40rpx;
				box-sizing: border-box;

				.image {
					width: 70rpx;
					height: 70rpx;
					margin-left: 29rpx;
					margin-right: 40rpx;
				}

				.name {
					.t1 {
						font-size: 32rpx;
						font-weight: bold;
						color: #445469;
					}

					.t2 {
						font-size: 28rpx;
						font-weight: 500;
						color: #6A819E;
						margin-top: 5rpx;
					}
				}
			}

			.box {
				padding: 0rpx 30rpx;
				background-color: #FFFFFF;
			}

			.nav {
				line-height: 100rpx;
				height: 100rpx;
				padding: 0rpx 28rpx;
				display: flex;
				justify-content: space-between;

				.name {
					font-size: 32rpx;
					font-weight: bold;
					color: #445469;
				}

				.value {
					font-size: 32rpx;
					font-weight: bold;
					color: #445469;
				}

				.width {
					width: 120rpx;
					text-align: center;
				}
			}

			.border {
				border-bottom: 1rpx solid #d6d7d9;
			}

			.center {
				background-color: #FBFDFF;
				padding: 32rpx 38rpx;
				padding-top: 12rpx;
				border-bottom: 2rpx solid #E2E5ED;

				.item {
					display: flex;
					margin-top: 20rpx;

					.name {
						width: 150rpx;
					}
				}
			}
		}

		.flow {
			margin-top: 30rpx;
			background-color: #FFFFFF;
			padding-left: 62rpx;
			padding-right: 72rpx;
			padding-top: 36rpx;

			.f-title {
				font-size: 30rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #22204E;
				margin-bottom: 54rpx;
			}

			.f-body {
				height: 200rpx;
				padding-left: 10rpx;
				display: flex;

				.user {
					flex: 1;

					.user-item {
						text-align: right;
						margin-bottom: 150rpx;
					}

					.userImg {
						width: 50rpx;
						height: 50rpx;
						vertical-align: middle;
						margin-right: 14rpx;
					}

					.username {
						font-size: 22rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #6A819E;
					}

				}
			}
		}
	}
</style>
<style>
	page {
		width: 100%;
		height: 100%;
	}
</style>